import { Badge, Flex, Input, message, Popconfirm, Space, TableColumnsType, Tag, Tooltip, Typography, Image } from 'antd'
import { NavigateFunction } from 'react-router-dom'
import type {
  IPresetAttrTableData,
  ITableData,
  ITableDataRoleList,
  ProductFabricTypeVO,
  ProductTemplateVO,
} from './types'
import { DIS_STATUSBANDBTNTEXT, STATUSBAND, USERTYPETEXT } from '@/constant'
import { importBlobImg } from '@/api'
import { editProductColorDetail } from '@/api/goods'
import { getImageByUrl } from '@/utils/getImageByUrl'
import { EditOutlined, PictureOutlined, StopOutlined } from '@ant-design/icons'
import { handleTemplateStr } from '@/utils/util'
export const useDevSeasonColumns = ({ onDel }: { onDel: (info: ITableData) => void }): TableColumnsType<ITableData> => [
  {
    title: '开发季',
    dataIndex: 'seasonName',
    key: 'seasonName',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '年份',
    dataIndex: 'year',
    key: 'year',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '操作',
    align: 'center',
    render: (info) => {
      return (
        <Space size={'large'}>
          <Popconfirm title={`确认删除吗？`} onConfirm={() => onDel(info)} okText="确认" cancelText="取消">
            <Typography.Link type="danger">删除</Typography.Link>
          </Popconfirm>
        </Space>
      )
    },
  },
]
export const usePresetAttrColumns = (): TableColumnsType<IPresetAttrTableData> => [
  {
    title: '商品分类',
    dataIndex: 'className',
    key: 'className',
    align: 'center',
    width: 200,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '尺码组配置',
    dataIndex: 'sizeGroupList',
    key: 'sizeGroupList',
    align: 'center',
    width: 200,
    render: (info) => {
      return (
        <Flex gap="6px" wrap style={{ padding: 3 }}>
          {info?.length > 0
            ? info?.map((item: { sizeGroupCode: string; sizeGroupId: string; sizeGroupName: string }) => {
                return (
                  <Tag color="#42bac3" key={item.sizeGroupCode}>
                    {item.sizeGroupName}
                  </Tag>
                )
              })
            : '-'}
        </Flex>
      )
    },
  },
  {
    title: '商品信息模板配置',
    dataIndex: 'productTemplateName',
    key: 'productTemplateName',
    align: 'center',
    width: 120,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '更新人',
    dataIndex: 'updaterName',
    key: 'updaterName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
]
export const useDevColorColumns = ({
  tableData,
  settableData,
  reLoadPage,
}: {
  tableData: ITableData[]
  settableData: React.Dispatch<React.SetStateAction<ITableData[]>>
  reLoadPage: () => void
}): TableColumnsType<IPresetAttrTableData> => [
  {
    title: '颜色组',
    dataIndex: 'colorGroupName',
    key: 'colorGroupName',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '颜色名称',
    dataIndex: 'colorDetailName',
    key: 'colorDetailName',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '颜色编码',
    dataIndex: 'colorCode',
    key: 'colorCode',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '图片',
    dataIndex: 'picUrl',
    key: 'picUrl',
    align: 'center',
    render: (info, rows) => {
      return (
        <div className="image_hover_change_wrap">
          <div className="ihcw_image">
            {rows.isEdit ? (
              <div style={{ padding: '0 40px 0 0' }}>
                <Input
                  placeholder="粘贴图片到这里"
                  style={{ border: 'none', outline: 'none', boxShadow: 'none', borderRadius: 'none' }}
                  autoFocus
                  onPaste={async (event: any) => {
                    const items = (event.clipboardData || event.originalEvent.clipboardData).items
                    let hasImage = false
                    for (const item of items) {
                      if (item.type.indexOf('image') === 0) {
                        hasImage = true
                        const blob = item.getAsFile()
                        if (blob.size > 1024 * 1024 * 10) {
                          message.warning('图片大小不能超过10MB！')
                          return
                        }
                        const imgdata = await importBlobImg(blob)
                        if (imgdata.code === 200 && imgdata.data?.linkUrl) {
                          const paramsData = {
                            colorDetailId: rows?.colorDetailId,
                            picUrl: imgdata.data?.linkUrl,
                          }
                          const res = await editProductColorDetail(paramsData)
                          if (res.code === 200) {
                            message.success('操作成功')
                            reLoadPage()
                          }
                        }
                      }
                    }
                    if (!hasImage) {
                      message.warning('上传失败，粘贴内容不是图片！')
                      rows.isEdit = !rows.isEdit
                      settableData([...tableData])
                    }
                  }}
                ></Input>
              </div>
            ) : info ? (
              <img width={30} height={30} src={info} />
            ) : rows?.rgbValue ? (
              <span
                style={{
                  width: 30,
                  height: 30,
                  display: 'inline-block',
                  verticalAlign: 'middle',
                  backgroundColor: `rgb${rows?.rgbValue}`,
                }}
              ></span>
            ) : (
              '-'
            )}
          </div>
          {
            <div className="fly_btn_upload">
              <Tooltip title={rows.isEdit ? '取消' : '图片替换'}>
                <div
                  onClick={() => {
                    rows.isEdit = !rows.isEdit
                    settableData([...tableData])
                  }}
                >
                  {rows.isEdit ? <StopOutlined /> : <PictureOutlined />}
                </div>
              </Tooltip>
            </div>
          }
        </div>
      )
    },
  },
  {
    title: '状态',
    dataIndex: 'enableStatus',
    key: 'enableStatus',
    align: 'center',
    render: (info) => {
      return <Badge status={info == 1 ? 'success' : 'error'} text={STATUSBAND[info] || '-'} />
    },
  },
]
export const useSizeColumns = (): TableColumnsType<IPresetAttrTableData> => [
  {
    title: '尺码组',
    dataIndex: 'sizeGroupName',
    key: 'sizeGroupName',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '尺码名称',
    dataIndex: 'sizeDetailName',
    key: 'sizeDetailName',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '状态',
    dataIndex: 'enableStatus',
    key: 'enableStatus',
    align: 'center',
    render: (info) => {
      return <Badge status={info == 1 ? 'success' : 'error'} text={STATUSBAND[info] || '-'} />
    },
  },
]
export const useTemplate = (
  onEditTemplate: (info: ProductTemplateVO) => void,
  CanEdit: boolean,
): TableColumnsType<ProductTemplateVO> => [
  {
    title: '模板名称',
    dataIndex: 'productTemplateName',
    key: 'productTemplateName',
    align: 'center',
    width: 150,
    fixed: 'left',
    ellipsis: {
      showTitle: false,
    },
    render: (info, rows) => {
      return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Tooltip placement="top" title={info}>
            <div style={{ maxWidth: 100, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
              {info || '-'}
            </div>
          </Tooltip>
          {CanEdit && (
            <EditOutlined
              style={{ color: 'var(--primary-color)', cursor: 'pointer', marginLeft: 6 }}
              onClick={() => onEditTemplate(rows)}
            />
          )}
        </div>
      )
    },
  },
  {
    title: '商品系列',
    dataIndex: 'productSeries',
    key: 'productSeries',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('productSeries', rows)
    },
  },
  {
    title: '基码',
    dataIndex: 'baseSizeCode',
    key: 'baseSizeCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('baseSizeCode', rows)
    },
  },
  {
    title: '版型',
    dataIndex: 'patternType',
    key: 'patternType',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('patternType', rows)
    },
  },
  {
    title: '领型',
    dataIndex: 'collarType',
    key: 'collarType',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('collarType', rows)
    },
  },
  {
    title: '花型',
    dataIndex: 'flowerType',
    key: 'flowerType',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('flowerType', rows)
    },
  },
  {
    title: '杯型',
    dataIndex: 'moduleType',
    key: 'moduleType',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('moduleType', rows)
    },
  },
  {
    title: '后比',
    dataIndex: 'laterThan',
    key: 'laterThan',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('laterThan', rows)
    },
  },
  {
    title: '模杯材质',
    dataIndex: 'moldCupMaterial',
    key: 'moldCupMaterial',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('moldCupMaterial', rows)
    },
  },
  {
    title: '模杯厚度',
    dataIndex: 'moldCupThickness',
    key: 'moldCupThickness',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('moldCupThickness', rows)
    },
  },
  {
    title: '模杯形状',
    dataIndex: 'moldCupShape',
    key: 'moldCupShape',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('moldCupShape', rows)
    },
  },
  {
    title: '排扣',
    dataIndex: 'breasted',
    key: 'breasted',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('breasted', rows)
    },
  },
  {
    title: '面料',
    dataIndex: 'fabricType',
    key: 'fabricType',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('fabricType', rows)
    },
  },
  {
    title: '功能',
    dataIndex: 'functionType',
    key: 'functionType',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('functionType', rows)
    },
  },
  {
    title: '风格',
    dataIndex: 'styleCode',
    key: 'styleCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('styleCode', rows)
    },
  },
  {
    title: '图案布局',
    dataIndex: 'patternLayoutCode',
    key: 'patternLayoutCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('patternLayoutCode', rows)
    },
  },
  {
    title: '元素',
    dataIndex: 'elementCode',
    key: 'elementCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('elementCode', rows)
    },
  },
  {
    title: '工艺',
    dataIndex: 'technicsCode',
    key: 'technicsCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('technicsCode', rows)
    },
  },
  {
    title: '适卖温度',
    dataIndex: 'sellTempCode',
    key: 'sellTempCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('sellTempCode', rows)
    },
  },
  {
    title: '克重',
    dataIndex: 'gramWeight',
    key: 'gramWeight',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('gramWeight', rows)
    },
  },
  {
    title: '厚度',
    dataIndex: 'thicknessCode',
    key: 'thicknessCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('thicknessCode', rows)
    },
  },
  {
    title: '价格带',
    dataIndex: 'priceTagCode',
    key: 'priceTagCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('priceTagCode', rows)
    },
  },
  {
    title: '年龄段',
    dataIndex: 'ageCode',
    key: 'ageCode',
    align: 'center',
    width: 100,
    render: (_, rows) => {
      return handleTemplateStr('ageCode', rows)
    },
  },
  {
    title: '更新人',
    dataIndex: 'updaterName',
    key: 'updaterName',
    align: 'center',
    width: 100,
    render: (info) => {
      return info || '-'
    },
  },
]
export const useFabricTypeColumns = ({
  onEdit,
}: {
  onEdit: (info: ProductFabricTypeVO) => void
}): TableColumnsType<ProductFabricTypeVO> => [
  {
    title: '面种编码',
    dataIndex: 'fabricTypeCode',
    key: 'fabricTypeCode',
    align: 'center',
    width: 150,
    fixed: 'left',
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '面种名称',
    dataIndex: 'fabricTypeName',
    key: 'fabricTypeName',
    align: 'center',
    width: 150,
    fixed: 'left',
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="top" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '幅宽（cm）',
    dataIndex: 'fabricBreadth',
    key: 'fabricBreadth',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '克重（g/㎡）',
    dataIndex: 'gramWeight',
    key: 'gramWeight',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '纱支规格',
    dataIndex: 'yarnSpec',
    key: 'yarnSpec',
    align: 'center',
    width: 150,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '成分',
    dataIndex: 'fabricComposition',
    key: 'fabricComposition',
    align: 'center',
    width: 150,
    ellipsis: {
      showTitle: false,
    },
    render: (info) => {
      return (
        <Tooltip placement="topLeft" title={info}>
          {info || '-'}
        </Tooltip>
      )
    },
  },
  {
    title: '更新人',
    dataIndex: 'updateByName',
    key: 'updateByName',
    align: 'center',
    width: 150,
    render: (info) => {
      return info || '-'
    },
  },
  {
    title: '状态',
    dataIndex: 'enableStatus',
    key: 'enableStatus',
    align: 'center',
    width: 150,
    render: (info) => {
      return <Badge status={info == 1 ? 'success' : 'error'} text={STATUSBAND[info] || '-'} />
    },
  },
  {
    title: '操作',
    align: 'center',
    width: 150,
    fixed: 'right',
    render: (info) => {
      return (
        <Space size={'large'}>
          <Typography.Link onClick={() => onEdit(info)}>编辑</Typography.Link>
        </Space>
      )
    },
  },
]
